GermanWikipedia - /page/entry.mu

Micron Document

<!DOCTYPE html>

<title>Sizzle Selector Engine</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Sizzle Selector Engine</span></h1>

</header>

</div>

<p>Die <span lang="en"><b>Sizzle Selector Engine</b></span> ist eine auf <a href="JavaScript" title="JavaScript">JavaScript</a> basierende <a href="Engine" title="Engine">Engine</a> zum Selektieren von Elementen innerhalb des <a href="Document_Object_Model" title="Document Object Model">Document Object Models</a> (DOM). Die Engine, entwickelt vom <a href="JQuery" title="JQuery">jQuery</a>-Team, ist <a href="Standalone" title="Standalone">Standalone</a> nutzbar und ist mit der Version 1.3 des JavaScript-<a href="Framework" title="Framework">Frameworks</a> jQuery veröffentlicht worden. Sizzle ist nativer Bestandteil von jQuery; weil es von anderen Programmbibliotheken nicht abhängt, können Entwickler diese Engine aber auch in ihr Projekt integrieren.<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Problematik">Problematik</h2></div>

<p>JavaScript bietet dem Entwickler nur eingeschränkte Möglichkeiten, Elemente des DOMs direkt zu selektieren. Eine native und breit unterstützte Möglichkeit zum Selektieren eines Elementes mit einer gegebenen ID ist die Nutzung der Funktion <code>getElementById('idName')</code>. Webentwickler referenzieren aber oft mehrere Elemente ähnlicher Art, etwa alle Elemente, die eine gleiche Klasse besitzen oder Elemente, die ein bestimmtes Attribut beinhalten. Für alle Einzelfälle muss der Entwickler oft mehrzeilige Funktionen schreiben, um eine <a href="Cross-Browser" title="Cross-Browser">browserkompatible</a> Lösung zu schaffen.<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> Die Funktion zum Selektieren aller Elemente eines gleichen Typs <code>getElementsByTagName</code> sowie eine Funktion zum Selektieren aller Elemente mit einem Klassennamen <code>getElementsByClassName</code> wird von älteren Browsern nicht fehlerfrei unterstützt.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> Mit <a href="HTML5" title="HTML5">HTML5</a> werden zwar viele Selektionen innerhalb des DOM vereinfacht, jedoch wird dieser Standard des <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a> noch nicht von allen Browsern fehlerfrei unterstützt.

</p><p><i>Sizzle</i> nimmt dem Entwickler diese Arbeit ab und stellt eine browserübergreifende, intuitive <a href="Programmierschnittstelle" title="Programmierschnittstelle">API</a> bereit.

</p>

<div class="mw-heading mw-heading2"><h2 id="Prinzip">Prinzip</h2></div>

<p>Die Selektion ist nahezu identisch mit denen der <a href="Cascading_Style_Sheets" title="Cascading Style Sheets">Cascading Style Sheets</a>, auch CSS3-Selektoren werden unterstützt.

</p>

<div class="mw-heading mw-heading2"><h2 id="Beispiel">Beispiel</h2></div>

<p>Möchte man alle <code>span</code>-Elemente selektieren, die ein direktes Kind aller <code>p</code>-Elemente sind, so erfolgt dies durch folgenden Code:

</p>

<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">Sizzle</span><span class="p">(</span><span class="s1">'p > span'</span><span class="p">);</span>

</pre></div>

<p>Das Selektieren von Links, die example.org enthalten, erfolgt so:

</p>

</pre></div>

<p>Da Sizzle nahtlos in jQuery integriert ist, erfolgt eine Selektion in diesem Framework nach dem gleichen Prinzip:

</p>

<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">'a[href*="example.org"]'</span><span class="p">);</span>

</pre></div>

<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>

<ul><li><a rel="nofollow" class="external text" href="http://sizzlejs.com/">Sizzle-Projektsite</a></li></ul>

<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>

/* start https://de.wikipedia.org/ */

.mw-parser-output .webarchiv-memento a{color:inherit}

/* end https://de.wikipedia.org/ */

</style><a rel="nofollow" class="external text" href="https://web.archive.org/web/20110925143724/http://www.myinkblog.com/2009/09/11/sizzle-a-look-at-jquerys-new-css-selector-engine/">Kurze Einführung in Sizzle</a> (<span class="webarchiv-memento"><a href="Webarchivierung#Begrifflichkeiten" title="Webarchivierung">Memento</a></span> des <style data-mw-deduplicate="TemplateStyles:r250917974">

/* start https://de.wikipedia.org/ */

.mw-parser-output .dewiki-iconexternal>a{background-position:center right!important;background-repeat:no-repeat!important}body.skin-minerva .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/OOjs_UI_icon_external-link-ltr-progressive.svg")!important;background-size:10px!important;padding-right:13px!important}body.skin-timeless .mw-parser-output .dewiki-iconexternal>a,body.skin-monobook .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/MediaWiki_external_link_icon.svg")!important;padding-right:13px!important}body.skin-vector .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/Link.ernal-small-ltr-progressive.svg")!important;background-size:0.857em!important;padding-right:1em!important}

/* end https://de.wikipedia.org/ */

</style><span class="dewiki-iconexternal"><a class="external text" href="https://redirecter.toolforge.org/?url=http%3A%2F%2Fwww.myinkblog.com%2F2009%2F09%2F11%2Fsizzle-a-look-at-jquerys-new-css-selector-engine%2F">Originals</a></span> vom 25. September 2011 im <i><a href="Internet_Archive" title="Internet Archive">Internet Archive</a></i>) <small class="archiv-bot"><span class="wp_boppel noviewer" aria-hidden="true" role="presentation"><span typeof="mw:File"><span title="i"></span></span></span> <b>Info:</b> Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.</small><span style="display:none"><a rel="nofollow" class="external text" href="http://IABotmemento.invalid/http://www.myinkblog.com/2009/09/11/sizzle-a-look-at-jquerys-new-css-selector-engine/">@1</a></span><span style="display:none"><a rel="nofollow" class="external text" href="http://www.myinkblog.com/2009/09/11/sizzle-a-look-at-jquerys-new-css-selector-engine/">@2</a></span><span style="display:none">Vorlage:Webachiv/IABot/www.myinkblog.com</span></span>

</li>

<li id="cite_note-2"><span class="mw-cite-backlink"><a href="#cite_ref-2">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20110924072358/http://snipplr.com/view/1696/">Eine Beispielfunktion für das Selektieren aller Elemente einer gleichen Klasse, ohne Nutzung von Sizzle</a> (<span class="webarchiv-memento"><a href="Webarchivierung#Begrifflichkeiten" title="Webarchivierung">Memento</a></span> des <span class="dewiki-iconexternal"><a class="external text" href="https://redirecter.toolforge.org/?url=http%3A%2F%2Fsnipplr.com%2Fview%2F1696%2F">Originals</a></span> vom 24. September 2011 im <i><a href="Internet_Archive" title="Internet Archive">Internet Archive</a></i>) <small class="archiv-bot"><span class="wp_boppel noviewer" aria-hidden="true" role="presentation"><span typeof="mw:File"><span title="i"></span></span></span> <b>Info:</b> Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.</small><span style="display:none"><a rel="nofollow" class="external text" href="http://IABotmemento.invalid/http://snipplr.com/view/1696/">@1</a></span><span style="display:none"><a rel="nofollow" class="external text" href="http://snipplr.com/view/1696/">@2</a></span><span style="display:none">Vorlage:Webachiv/IABot/snipplr.com</span></span>

</li>

<li id="cite_note-3"><span class="mw-cite-backlink"><a href="#cite_ref-3">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://reference.sitepoint.com/javascript/Document/getElementsByTagName">Browser-Unterstützung für <i>getElementsByTagName()</i></a></span>

</li>

<li id="cite_note-4"><span class="mw-cite-backlink"><a href="#cite_ref-4">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://blog.justswell.org/clientside-getelementsbyclassname-cross-browser-implementation/">Internet-Explorer-kompatible Lösung für <i>getElementsByClassName</i></a></span>

</li>

</ol></div><div><div class="zim-footer">

Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2025-11-10" href="https://de.wikipedia.org/wiki/?title=Sizzle_Selector_Engine&oldid=261440350">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.

</div>

</div></div>

</div>

</main>

</div>

</body></html>